<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>CSS3 2D动画旋转</title>
  <style>
    div {
      margin: 50px;
      height: 90px;  
      width: 90px;
      background: gray;
    }

    .r1 {
      transform: rotate(30deg);
    }

    .r2 {
      transform: rotate(-30deg);
    }

    .t1 {
      transform: translate(-50px)
    }

    .t2 {
      transform: translate(50px)
    }

    .t3 {
      transform: translate(50px, 50px)
    }


    .s1 {
      margin-top: 100px;
      transform: scale(2)
    }

    .s2 {
      margin-top: 100px;
      transform: scale(-2)
    }

    .s3 {
      transform: scale(0.5)
    }

    .s4 {
      transform: scale(-0.5)
    }

    .sk1 {
      transform: skew(30deg)
    }

    .sk2 {
      transform: skew(-30deg)
    }

    .sk3 {
      transform: skew(30deg, -30deg)
    }

    .sk4 {
      transform: skew(-30deg, 30deg)
    }

    .m {
      transform: matrix(1, 0, 0, 1, 30, 30);
    }
  </style>
</head>
<body>
  <div>参照物</div>
  <div class="r1">rotate1</div>
  <div class="r2">rotate2</div>
  <div class="t1">translate1</div>
  <div class="t2">translate2</div>
  <div class="t3">translate3</div>
  <div class="s1">scale1</div>
  <div class="s2">scale2</div>
  <div class="sk1">skew1</div>
  <div class="sk2">skew2</div>
  <div class="m">matrix</div>
</body>
</html>
